<template>
  <div id="licai">
    <div class="homeTitle">理财产品交易申请</div>
    
    <div class="tableBox">
      <div>
        <div class="tableTitle">申请人信息： </div>
      <el-form class="formlist" :model="formData1"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList1" :key="item.label" :label="item.label" :prop="item.prop">
                    {{formData1[item.prop]}}
                    </el-form-item>
           </el-form>
      </div>
      
      <div >
      <div class="tableTitle">理财产品信息： </div>
      <el-form class="formlist" :model="formData3"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList3" :key="item.label" :label="item.label" :prop="item.prop">
                    <template v-if="item.btn">
                        <span style="margin-left:-30px;margin-right:45px">{{formData3['code']}}</span>
                        <el-button type="text" @click="gozs">点击选择理财产品</el-button>
                    </template>
                   
                    <template v-else-if="item.qujian">
                        {{formData3[item.start]}}~{{formData3[item.end]}}
                      </template>
                      <template v-else>
                        {{(formData3[item.prop] != null && formData3[item.prop] != '') ? formData3[item.prop] : '暂无数据'}}
                      </template>
                    </el-form-item>
           </el-form>
      </div>
      <div class="tableBox">
        <div class="tableTitle">交易详情</div>
         <el-form :model="formData"  class="formlist" :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList" :key="item.label" :label="item.label" :prop="item.prop">
                    <el-input placeholder="请输入" :disabled="item.disabled" v-if="item.input" class="inputt" v-model= 'formData[item.prop]'></el-input>
                      <template v-else-if="item.btn">
                        <el-button :disabled="item.disabled" type="text"  @click="goShu" >{{item.value}}</el-button>
                    </template>
                    <el-select @change="selectChange" placeholder="请选择" style="width:100%" v-else-if="item.select" v-model="formData[item.prop]" >
                        <el-option  v-for="option in item.options" :key = "option.label" :label="option.label" :value="option.value"></el-option>
                    </el-select>
                    <el-date-picker  v-else-if="item.date"
                        style="width:100%"
                        v-model="formData[item.prop]"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                    <div v-else>{{formData[item.prop]}}12</div>
                </el-form-item>
                
            </el-form>
      </div>
      <div v-show="selectedData.length > 0">
        <div class="tableTitle" >赎回明细：</div>
        <el-table :data="selectedData" border style="width: 98%">
          
          <el-table-column prop="code" label="产品代码"  align="center"></el-table-column>
          <el-table-column prop="transactionNumber" label="成交编号" align="center"></el-table-column>
          <el-table-column prop="annualized" label="年化收益率"  align="center"></el-table-column>
          <el-table-column prop="dueDate" label="	结息日"  align="center"></el-table-column>
          <el-table-column prop="availableBalance" label="可用余额" align="center"></el-table-column>
          <el-table-column prop="initialAmount" label="初始金额" align="center"></el-table-column>
          <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
          <el-table-column prop="term" label="产品期限" align="center"></el-table-column>
          <el-table-column prop="type" label="产品类型" align="center"></el-table-column>
          <el-table-column prop="interestDate" label="起息日" align="center"></el-table-column>
          <el-table-column prop="money" label="赎回金额(元)" align="center"></el-table-column>
        
        </el-table>
      </div>
      <div id="fujian" style="width: 98%">

        <div class="tableTitle">附件信息（可选项）</div>
            <table>
          <tr style="height:50px;background:rgba(53,58,58,0.8)">
            <!-- <td style="width:33%">文件描述</td> -->
            <td>附件名称</td>
            <td>操作</td>
          </tr>
          
          <tr v-for="(file, index) in fileList" :key="index">
            <!-- <td>{{file.filename}}</td> -->
            <td>{{file.name}}</td>
            <td>
                <el-button type="text" @click="delFile(index)">删除</el-button>
              </td> 
          </tr>
          <tr>
            <!-- <td>
              <el-input placeholder="请输入文件描述" v-model="filename"></el-input>
            </td> -->
            <td>
                 <el-upload
                  class="upload-demo"
                  :action="uploadfile"
                  :on-preview="handlePreview"
                  
                  :on-remove="handleRemove"
                  
                  :on-success="uploadSuccess"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small"  type="text">上传附件</el-button>
                </el-upload>
            </td>
            <td>
            </td>
          </tr>
        </table>
      </div>
       <div class="riskTip">
            <div class="fxtq tableTitle"><span style="color:red">*</span>申请事由：</div>
            <div class="fxcon">
              <el-input type="textarea" placeholder="请输入申请事由" v-model="reason"></el-input>
            </div>
        </div>
      <el-dialog title="选择下一待办人" :visible.sync="nextManager" width="30%" center>
           <div v-show="nextManager">
           <el-radio-group v-model="nextUserId">
            <el-radio v-for="item in tableData" :key="item.id"  :label="item.id">
              <span class="user_name">{{item.name}}</span>
              <span class="user_part">{{item.department}}</span>
              </el-radio>
          </el-radio-group>
          
        </div>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addApply" size="small">确认</el-button>
          <el-button @click="cancleNext"  size="small">取 消</el-button>
      </span>
      </el-dialog>
      <div class="btn">
        <el-button type="primary" size="small" @click="storage">暂存</el-button>
        <el-button type="primary"  size="small"  @click="submitPost">提交</el-button>
        <el-button type="primary" @click="goback" size="small">取消</el-button>
      </div>
    </div>
    <el-dialog :title="diatitle" :visible.sync="centerDialogVisible"  center>
      <div class="DiaFxcon">
        <p>{{tishiMessage}}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getFlow" size="small">继续</el-button>
        <el-button @click="centerDialogVisible = false" size="small">取 消</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "accountDetail",
  data() {
    return {
      diatitle:'',
      centerDialogVisible: false,
      nextManager: false,
      selectedData: [],
      tableData: [],
      nextUserId: '',
      step: 1,
      isAuthorization: 2,
      reason: '',
      rules:{

      },
      filename:'',
      filelist: [{
        
      }],
      tishiMessage:'',

      formList1: [
        {label: '机构编号', prop: 'bankNo', value:''},{label: '机构名称', prop: 'bank', value:''},
        {label: '操作员工号', prop: 'jobNum', value:''},{label: '操作员姓名', prop: 'name', value:''},
      ],
      formData1: {},
     
      formList3: [
        {label: '产品代码', prop: 'code', value:'', btn: true},{label: '产品名称', prop: 'name', value:'', btn: false},
        {label: '产品类型', prop: 'type', value:''},{label: '利率类型', prop: 'rateType', value:''},
        {label: '发售方分类', prop: 'classification', value:''},{label: '发售银行性质', prop: 'issuingBank', value:''},
        {label: '期限结构', prop: 'termStructure', value:''},{label: '产品期限', prop: 'term', value:''},
        {label: '起息日', prop: 'interestDate', value:''},{label: '到期日', prop: 'dueDate', value:''},
        {label: '计息基础', prop: 'countBasis', value:''},{label: '预期收益率',start: 'expectedReturnStart', end: 'expectedReturnEnd', qujian: true, prop: 'expectedReturnEnd', value:''},
        {label: '收益模式', prop: 'revenuePattern', value:''}
      ],
      formData3: {
        code: ''
      },
      formData:{
        
      },
      formList: [
        {label : '购买方式', value:'hhh', prop:'ways', select: true,
        options: [
            {label: '认购', value: '认购'},
            {label: '申购', value: '申购'},{label: '赎回', value: '赎回'}
           
        ]},
        {label : '金额（元）', value:'是', disabled:false, prop:'money',input: true},
        {label : '年化收益率', value:'是', prop:'annualized',input: true},
        {label : '机构标识', value:'hhh', prop:'identification', select: true,
         options: [
            {label: '系统外', value: '系统外'},
            {label: '系统内', value: '系统内'}
           
        ]},
        {label : '机构类型', value:'hhh', prop:'organizationType', select: true,
         options: [
           
        ]},
        {label : '机构名称', value:'是', prop:'organizationName',input: true}, 
        {label : '机构销售点', value:'是', prop:'institutionalPoint',input: true}, 
        {label : '赎回明细', value:'赎回明细', disabled: true, prop:'',btn: true}, 
       
      ],
      boundId: '',
      multipleSelection: [],
      fileList: [],
      fileUrl: [],
      uploadfile: this.$uploadfile
    };
  },

  methods: {
    storage() {
        let obj = {
          licai: this.formData3,
          licaiApply: this.formData,
          file: this.fileList,
          reason: this.reason
        }
        let param = {
        model: '理财产品交易',
        counterparty: '',
        applyMessage: JSON.stringify(obj)
      }
      if(sessionStorage.getItem('storageId')) {
          param.id = sessionStorage.getItem('storageId')
        }
      this.axios.post('/applyTemporary/addOrUpdate', param).then(res => {
        this.$message({
          type: 'success',
          message: '暂存成功'
        })
        this.clearSession()
        this.$router.push('transaction')
      })
    },
    delStorage() {
           let param = {
              id:  Number(sessionStorage.getItem('storageId'))
            }
            this.axios.post('applyTemporary/deleteById', param).then(res => {
              
            })
    },
      getStorageDetail() {
      // 暂存详情
      let param = {
        id: sessionStorage.getItem('storageId')
      }
      this.axios.get('applyTemporary/selectById', {
        params: param
      }).then(res => {
        let {licai,licaiApply, file, reason} = res.data.data
         this.formData3 = licai 
         this.formData = licaiApply
         this.fileList = file
         this.reason = reason


// 跳转引起的修改
          if(sessionStorage.getItem('formData')) {
          this.formData = JSON.parse(sessionStorage.getItem('formData'))
          this.reason = this.formData.reason
          if(this.formData.ways == '赎回') {
            let len = this.formList.length
            this.formList[len-1].disabled = false
            this.formList[1].disabled = true
          }
        }
        if(sessionStorage.getItem('shData')) {
          this.selectedData = JSON.parse(sessionStorage.getItem('shData'))
          let totalmoney = 0

          this.selectedData.forEach(item => {
            totalmoney += Number(item.money)
          })
          this.formData.money = totalmoney
        }
      })
    },
    checkFile() {
      if(this.filename == '') {
        this.$message({
          type: 'warning',
          message: '请输入文件描述'
        })
        return false
      }
    },
    goback() {
      this.clearSession()
      this.$router.go('-1')
    },
    // 赎回明细
    goShu() {
      if(sessionStorage.getItem('productId')) {
        this.formData.reason = this.reason
        sessionStorage.setItem('formData', JSON.stringify(this.formData))
        this.$router.push('shuProducts')
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择理财产品'
        })
      }
      
    },
      // 文件
     handleRemove(file, fileList) {
      },
      handlePreview(file) {
        
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      delFile(val) {
        this.fileList.splice(val, 1)
        this.fileUrl.splice(val, 1)
      },
      addfile() {

      },
      //上传成功
      uploadSuccess(response, file, fileList) {
        file.filename = this.filename
        this.fileList = fileList
        let item = {}
        item.info = this.filename
        item.name = file.name
        item.filename = response.data.fileName
        item.url = response.data.filePath
        this.fileUrl.push(item)
        this.filename = ''
      },
    selectChange(val) {
        // 系统内外
           if(val == '系统内') {
              this.formList[4].options = [ 
                {label: '村镇银行', value: '村镇银行'},
                {label: '省外系统内-省级银行业存款类金融机构', value: '省外系统内-省级银行业存款类金融机构'},
                {label: '省外系统内-地市级银行业存款类金融机构', value: '省外系统内-地市级银行业存款类金融机构'},
                {label: '省外系统内-县级银行业存款类金融机构', value: '省外系统内-县级银行业存款类金融机构'},
                {label: '省外系统内-其他存款类金融机构', value: '省外系统内-其他存款类金融机构'},
              ]
              
           }else {
              this.formList[4].options = [
                    {label: '国有控股商业银行', value: '国有控股商业银行'},
                    {label: '全国性股份制商业银行', value: '全国性股份制商业银行'},
                    {label: '政策性银行', value: '政策性银行'},
                    {label: '城市商业银行', value: '城市商业银行'},
                    {label: '村镇银行', value: '村镇银行'},
                    {label: '其他银行业存款类金融机构', value: '其他银行业存款类金融机构'},
                    {label: '银行业非存款类金融机构', value: '银行业非存款类金融机构'},
                    {label: '证券业金融机构', value: '证券业金融机构'},
                    {label: '保险业金融机构', value: '保险业金融机构'},
                    {label: '交易及结算类金融机构', value: '交易及结算类金融机构'},
                    {label: '特殊目的载体金融机构', value: '特殊目的载体金融机构'},
                    {label: '小额贷款公司', value: '小额贷款公司'},
                    {label: '金融控股公司', value: '金融控股公司'},
                    {label: '境内其他金融机构', value: '境内其他金融机构'},
                    {label: '境外同业', value: '境外同业'}
              ]
           }
           let len = this.formList.length
           if(val == '赎回') {
             this.formList[len-1].disabled = false
             this.formList[1].disabled = true
           } 
           if(val == '认购' || val == '申购') {
             this.formList[len-1].disabled = true
             this.formList[1].disabled = false
           } 
    },
    cancleNext() {
      this.nextManager = false;
    },
    submitPost() {
      if(this.reason == '') {
                this.$message({
                  type: 'warning',
                  message: '请输入申请事由'
                })
                return
              }
              let data = Object.assign(this.formList)
          let formda = this.formData
          for(let i = 0; i< data.length; i++) {
            console.log(data[i].label)
            if(data[i].label == '赎回明细')
              continue
            
            if(formda[data[i].prop] == undefined || formda[data[i].prop] == '') {
                this.$message({
                  type: 'warning',
                  message: data[i].label + "不可为空"
              })
             return false
            }
          }
              if(this.step == 1){
                //第一步
              let param = {
                  model: '理财产品交易',
                  sumMoney: this.formData['money'],
                  productId: sessionStorage.getItem('productId') ? sessionStorage.getItem('productId') : this.formData3.id,
                  ways: this.formData['ways']
                }
              this.axios.get('financialProductsApply/checkRisk', {params: param}).then((res) => {
                  let data = res.data.data
                  
                  switch(data.state) {
                    case '1':  this.$message({
                                  type: 'warning',
                                  message: data.msg
                                });break;
                    case '2': this.isAuthorization = 1;
                              this.tishiMessage = data.msg
                              this.centerDialogVisible = true;
                              this.diatitle = '省联社授权提醒'
                              break;
                    case '3': 
                              
                            this.$message({
                              type: 'warning',
                              message: data.msg
                            });
                            this.tishiMessage = data.msg
                            this.centerDialogVisible = true;
                            this.diatitle = '风险预警提醒'
                            break;
                    case '4': 
                              //弹出下一列表
                              this.nextManager = true;
                              this.getNextUser()
                              break;
                    case '5': 
                      this.$message({
                        type: 'warning',
                        message: data.msg
                      });
                      break;
                     case '6': 
                        this.$message({
                          type: 'warning',
                          message: data.msg
                        });
                        break;
                    default: break;
                  }
              })
              }
         
      
    },
    addApply() {
      //获取下一办理人成功
          //提交申请
        
        this.formData.productId = sessionStorage.getItem('productId') ? sessionStorage.getItem('productId') : this.formData3.id,
       
        this.formData.nextUserId = this.nextUserId
        if(this.isAuthorization == 1 ){
          this.formData.isAuthorization = 1
        }else {
          this.formData.isAuthorization = 2
        }
        this.formData.reason = this.reason
        if(this.tishiMessage != '') {
          this.formData.warn = this.tishiMessage
        }
    //    let fileJsonArr = 
  
        this.formData.fileUrl = JSON.stringify(this.fileUrl)
      

        // 赎回
        let sellJson = []
        if(this.selectedData.length > 0) {
          this.selectedData.forEach(item => {
            let obj = {
                productId:  sessionStorage.getItem('productId'),
                holdId: item.holdId,
                money: item.money,
                transactionNumber: item.transactionNumber,
                annualized: item.annualized,
                code: item.code,
                name: item.name,
                type: item.type,
                initialAmount: item.initialAmount,
                interestDate: item.interestDate,
                dueDate: item.dueDate
            }
            if(item.term) {
              obj.term = item.term
            }
            sellJson.push(obj)
          })
          
        }
        this.formData.redeemDetails = JSON.stringify(sellJson)
        this.axios.post('financialProductsApply/addProductsApply', this.formData).then(res =>{
          if(res.data.code == 200) {
              this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.delStorage()
            this.clearSession()
            this.$router.push('transaction')
          }else {
            this.$message({
              type: 'error',
              message:'服务器出错或信息填写错误'
            })
          }
          
        })
    },
    getNextUser(flowId) {
      let param = {
        roleName: '交易员',
        flowId: flowId
      }
      this.axios.get('financialProductsApply/getNextUser', {
        params: param
      }).then((res) => {
          this.tableData = res.data.data.nextUser
          
      })
    },
    getFlow() {
      // 开始第二步
       this.centerDialogVisible = false;
        this.nextManager = true;
        this.getNextUser()
    },
    getOppoAccountInfo() {
      //交易对手账户信息
      let param = {
        accountId: sessionStorage.getItem('counterpartyAccountId')
      }
      this.axios.get('counterparty/selectOneAccount', {params: param}).then((res) => {
        this.formData2 = res.data.data
      })
    },
    close() {
      this.$router.go(-1);
    },
    gozs() {
      this.$router.push('selectLicai');
    },
    
    clearSession() {
      sessionStorage.removeItem('productId')
      sessionStorage.removeItem('selectedData')
      sessionStorage.removeItem('storageId')
      sessionStorage.removeItem('formData')
      sessionStorage.removeItem('shData')
    },
    getBoundInfo(val) {
      this.axios.get('financialProducts/selectById', {params: {
        id: val
      }}).then((res) => {
        this.formData3 = res.data.data.financialProducts
        this.formData3.interestDate = this.dateMoment(this.formData3.interestDate, 'YYYY-MM-DD')
        this.formData3.dueDate = this.dateMoment(this.formData3.dueDate, 'YYYY-MM-DD')
        
      })
    },
    goMzmx(val) {
      if(this.formData.sumMoney == '' || this.formData.sumMoney == null) {
        this.$message({
          type: 'warning',
          message: '请输入券面总额'
        })
      }else {
        this.$router.push({path: 'SellingDebts', query: {total: this.formData.sumMoney}})
      }
      
    }
  },
  mounted() {
 
    //申请人信息
    this.formData1 = JSON.parse(sessionStorage.getItem('user'))
     
    let isCounter = sessionStorage.getItem('counterpartyAccountId')
 
    if(sessionStorage.getItem('productId')){
      this.getBoundInfo(sessionStorage.getItem('productId'))
    }
    
    if(isCounter){
      this.getOppoAccountInfo()
    }
    if(sessionStorage.getItem('storageId')) {
      this.getStorageDetail()
    } else {
         if(sessionStorage.getItem('formData')) {
        this.formData = JSON.parse(sessionStorage.getItem('formData'))
        this.reason = this.formData.reason
        if(this.formData.ways == '赎回') {
          let len = this.formList.length
          this.formList[len-1].disabled = false
          this.formList[1].disabled = true
        }
      }
      if(sessionStorage.getItem('shData')) {
        this.selectedData = JSON.parse(sessionStorage.getItem('shData'))
        let totalmoney = 0

        this.selectedData.forEach(item => {
          totalmoney += Number(item.money)
        })
        this.formData.money = totalmoney
      }
    }
   
    
  },

};
</script>

<style lang="scss">
.riskTip {
  width: 98%
}
#licai {

#fujian{
  td{
    border:1px solid white;
    .el-upload-list{
      display: none;
    }
    .upload-demo{
      display: inline;
    }
    .el-input__inner{
      background: transparent;
      color:white;
      border: 0
    }
  }
}

  .tableBox {
    padding-top: 10;
    color: white;
    .formlist{
      .el-form-item{
        width:49%;
        margin:0;
        border: 1px solid white;
        .el-input__inner{
          border: 0;
          background: transparent;
          color: white
        }
        .el-form-item__label, .el-form-item__content{
            padding: 6px 2px;
            border-right: 1px solid white;
        }
        .el-form-item__label{
          text-align: center;
            width:45%;
            background: rgba(53,58,58,0.8);
            color:white;
            box-sizing: border-box;
        }
        .el-form-item__content{
          width:55%;
          text-align: center;
          background: rgba(53,58,58,0.55);
          box-sizing: border-box;
        }
      }
    }
    .el-table__empty-text{
      color:white;
    }
    .tableTitle {
      line-height: 36px;
      padding-left: 20px;
      margin: 12px 0;
    }
    table {
      
      border: 1px solid white;
      width: 100%;
      text-align: center;
      border-collapse: collapse;
       .el-table tr{
          background: transparent;
      }
      // margin-bottom: 20px;
      tr {
        td {
          
          &:nth-child(odd) {
            background: rgba(53, 58, 58, 0.55);
          }
          &:nth-child(even) {
            background: rgba(53, 58, 58, 0.55);
          }
        }
      }
    }
    .riskTip {
      .fxtq {
        margin-bottom: 20px;
      }
      .fxcon {
        border: 1px solid white;
        background-color: #4d534e;
        padding: 20px;
        margin-bottom: 20px;
      }
    }
    .btn {
      text-align: center;
      margin-top:20px;
    }
  }
  .DiaFxcon {
    background-color: white;
  }
      .el-radio-group{
    width:100%;
    height: 320px;
    overflow-y: scroll;
    .el-radio{
      margin-bottom: 15px;
      width: 100%;
      display: block;
       .el-radio__label {
        width: 80%;
        display: inline-block;
          
        .user_name, .user_part {
              padding: 15px;
              width: 48%;
              display: inline-block;
              text-align: center;
              border: 1px solid #efefef
            }
      }  
     
    }
     .el-radio+.el-radio{
        margin-left: 0
      }
  }
}
</style>
